<template>
  <div class="home-container">
    <el-row :gutter="20">
      <el-col :span="6" v-for="card in cardData" :key="card.title">
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>{{ card.title }}</span>
            </div>
          </template>
          <div class="card-content">
            <el-row>
              <el-col :span="12">
                <el-icon :size="40" :class="card.iconClass">
                  <component :is="card.icon"></component>
                </el-icon>
              </el-col>
              <el-col :span="12" class="card-value">
                {{ card.value }}
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>分派任务</span>
            </div>
          </template>
          <el-table :data="warningData" style="width: 100%">
            <el-table-column prop="material" label="物料" />
            <el-table-column prop="stock" label="当前库存" />
            <el-table-column prop="minimum" label="最低库存" />
            <el-table-column prop="status" label="状态">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === '紧急' ? 'danger' : 'warning'"
                >
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>

      <el-col :span="12">
        <el-card>
          <template #header>
            <div class="card-header">
              <span>待处理事项</span>
            </div>
          </template>
          <el-table :data="todoData" style="width: 100%">
            <el-table-column prop="type" label="类型" />
            <el-table-column prop="content" label="内容" />
            <el-table-column prop="date" label="日期" />
            <el-table-column label="操作" width="100">
              <template #default>
                <el-button link type="primary">处理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Box, Van, TakeawayBox, Warning } from "@element-plus/icons-vue";

const cardData = [
  {
    title: "总库存量",
    value: "1,234",
    icon: Box,
    iconClass: "text-primary",
  },
  {
    title: "待入库",
    value: "56",
    icon: Van,
    iconClass: "text-success",
  },
  {
    title: "待出库",
    value: "78",
    icon: TakeawayBox,
    iconClass: "text-warning",
  },
  {
    title: "分派任务",
    value: "12",
    icon: Warning,
    iconClass: "text-danger",
  },
];

const warningData = ref([
  {
    material: "原料A",
    stock: 100,
    minimum: 200,
    status: "紧急",
  },
  {
    material: "半成品B",
    stock: 300,
    minimum: 400,
    status: "警告",
  },
]);

const todoData = ref([
  {
    type: "入库",
    content: "待确认入库单据",
    date: "2024-03-20",
  },
  {
    type: "出库",
    content: "待审核出库申请",
    date: "2024-03-20",
  },
]);
</script>

<style scoped>
.home-container {
  padding: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  text-align: center;
}

.card-value {
  font-size: 24px;
  font-weight: bold;
  line-height: 40px;
}

.text-primary {
  color: #409eff;
}

.text-success {
  color: #67c23a;
}

.text-warning {
  color: #e6a23c;
}

.text-danger {
  color: #f56c6c;
}
</style>
